<template>
    <div id="right-bar" style="width: 100%; height: 400px"></div>
    <a-select
        class="select"
        :options="options"
        v-model:value="index"
        style="width: 90px"
        @change="handleChange"
    ></a-select>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import Lodash from 'lodash'

import echarts from '@/echarts'

import { option, years } from './constant'
import { result } from '@/views/screens/Sales/constant'

export default defineComponent({
    name: 'RightBar',
    setup() {
        const constant = {
            option,
            years
        }
        const state = reactive({
            index: 0,
            options: []
        })
        onMounted(() => {
            state.options = result.map((item: any, index: number) => {
                return {
                    label: item.countyName,
                    value: index
                }
            })
            methods.initChart()
        })
        const methods = {
            handleChange(value: any) {
                state.index = value
                methods.initChart()
            },
            initChart() {
                constant.option.series[0].data = JSON.parse(result[state.index].salesOverYears)
                echarts.init(document.getElementById('right-bar')).setOption(constant.option)
            }
        }
        return {
            ...toRefs(state),
            ...constant,
            ...methods
        }
    }
})
</script>
<style lang="scss" scoped>
.select {
    position: absolute;
    left: 10px;
    top: 20px;
}
</style>
